<template>
	<div>
		<y-shelf title="收货地址">
			<span slot="right"><y-button text="添加收货地址" style="margin: 0" @btnClick="update()"></y-button></span>
			<div slot="content">
				<div v-if="addList.length">
					<div class="address-item" v-for="(item,i) in addList" :key="i">
						<div class="name">{{item.ReceiverName}}</div>
						<div class="address-msg">
							{{item.AddrProvince}}{{item.AddrCity}}{{item.AddrArea}}{{item.AddrDetail}}
						</div>
						<div class="telephone">{{item.ReceiverPhone}}</div>
						<div class="defalut">
							<a @click="changeDef(item, addList)" href="javascript:;" v-text="item.Checked
?'( 默认地址 )':'设为默认'" :class="{'defalut-address':item.Checked
}">
							</a>
						</div>
						<div class="operation">
							<a href="javascript:;" @click="update(item)">修改</a>
							<a href="javascript:;" :data-id="item.Id" @click="del(item,i)">删除</a>
						</div>
					</div>
				</div>
				<div v-else>
					<div style="padding: 80px 0;text-align: center">
						<div style="font-size: 20px">你还未添加收货地址</div>
						<div style="margin: 20px ">
							<y-button text="添加地址" @btnClick="update()"></y-button>
						</div>
					</div>
				</div>
			</div>
		</y-shelf>
		<y-popup :open="popupOpen" @close='popupOpen=false' :title="popupTitle">
			<div slot="content" class="md" :data-id="msg.addressId">
				<div>
					<input type="text" placeholder="收货人姓名" v-model="msg.ReceiverName">
				</div>
				<div>
					<input type="number" placeholder="手机号码" v-model="msg.ReceiverPhone">
				</div>
				<div>
					<input type="text" placeholder="省" v-model="msg.AddrProvince">
				</div>
				<div>
					<input type="text" placeholder="市" v-model="msg.AddrCity">
				</div>
				<div>
					<input type="text" placeholder="区" v-model="msg.AddrArea">
				</div>
				<div>
					<input type="text" placeholder="详细收货地址" v-model="msg.AddrDetail">
				</div>
				<!--<div>
          <span><input type="checkbox" v-model="msg.Checked
" style="margin-right: 5px;">设为默认</span>
        </div>-->
				<y-button text='保存' class="btn" :classStyle="btnHighlight?'main-btn':'disabled-btn'" @btnClick="save({Id:msg.Id,ReceiverName:msg.ReceiverName,ReceiverPhone:msg.ReceiverPhone,AddrProvince:msg.AddrProvince,AddrCity:msg.AddrCity,AddrArea:msg.AddrArea,AddrDetail:msg.AddrDetail,Checked:msg.Checked
?1:0})">
				</y-button>
			</div>
		</y-popup>
	</div>
</template>
<script>
	import { addressList, addressUpdate, addressAdd, addressDel, addressDefault } from '/api/goods'
	import YButton from '/components/YButton'
	import YPopup from '/components/popup'
	import YShelf from '/components/shelf'
	import { mapState, mapMutations } from 'vuex'

	export default {
		data() {
			return {
				addList: [],
				popupOpen: false,
				popupTitle: '管理收货地址',
				msg: {
					Id: '',
					ReceiverName: '',
					ReceiverPhone: '',
					AddrProvince: '',
					AddrCity: '',
					AddrArea: '',
					AddrDetail: '',
					Checked: false
				},

			}
		},
		computed: {
			...mapState(['userInfo']),
			btnHighlight() {
				let msg = this.msg
				return msg.ReceiverName && msg.ReceiverPhone && msg.AddrDetail
			}
		},
		methods: {
			_addressList() {
				addressList().then(res => {
					console.log('获取地址列表res', res)
					if(res.code === 200) {
						let data = res.data.list
						if(data.length) {
							this.addList = res.data.list
						} else {
							this.addList = []
						}
					}
				})
			},
			_addressUpdate(params) {
				addressUpdate(params).then(res => {
					this._addressList()
				})
			},
			_addressAdd(params) {
				addressAdd(params).then(res => {
					console.log('添加收货地址res', res)
					if(res.code === 200) {
						this._addressList()
					} else {

					}
				})
			},
			changeDef(item, addressList) {
				console.log('item', item)
				let me = this
				for(var i = 0; i < addressList.length; i++) {
					addressList[i].Checked = 0
				}
				console.log('me.userInfo', me.userInfo)
				if(!item.Checked) {
					item.Checked = true
					addressDefault(me.userInfo.info.Id, {
						AddressId: item.Id
					}).then(res => {
						console.log('设默认地址res', res)
					})
				}
				return false
			},
			// 保存
			save(p) {
				if(p.Id) {
					this._addressUpdate(p)
				} else {
					delete p.addressId
					this._addressAdd(p)
				}
				this.popupOpen = false
			},
			// 删除
			del(params, i) {
				addressDel(params).then(res => {
					console.log('删除地址res', res)
					if(res.code === 200) {
						this.addList.splice(i, 1)
					} else {
						alert('删除失败')
					}
				})
			},
			// 修改
			update(item) {
				this.popupOpen = true
				if(item) {
					this.popupTitle = '管理收货地址'
					this.msg.ReceiverName = item.ReceiverName
					this.msg.ReceiverPhone = item.ReceiverPhone
					this.msg.AddrProvince = item.AddrProvince
					this.msg.AddrCity = item.AddrCity
					this.msg.AddrArea = item.AddrArea
					this.msg.AddrDetail = item.AddrDetail
					this.msg.Checked = item.Checked ?
						true : false
					this.msg.Id = item.Id
				} else {
					this.popupTitle = '新增收货地址'
					this.msg.ReceiverName = ''
					this.msg.ReceiverPhone = ''
					this.msg.AddrProvince = ''
					this.msg.AddrCity = ''
					this.msg.AddrArea = ''
					this.msg.AddrDetail = ''
					this.msg.Checked = false
					this.msg.Id = ''
				}
			}
		},
		created() {
			this._addressList()
		},
		components: {
			YButton,
			YPopup,
			YShelf
		}
	}
</script>
<style scoped lang="scss">
	.address-item {
		display: flex;
		align-items: center;
		height: 115px;
		text-align: center;
		.name {
			width: 106px;
		}
		.address-msg {
			flex: 1;
		}
		.telephone {
			width: 160px;
		}
		.defalut {
			width: 80px;
			>a {
				text-align: center;
				/*display: none;*/
			}
		}
		.operation {
			width: 135px;
			a {
				padding: 10px 5px;
			}
		}
		&:hover {
			.defalut>a {
				display: block;
			}
		}
	}
	
	.address-item+.address-item {
		border-top: 1px solid #CFCFCF;
	}
	
	.defalut-address {
		color: #626262;
		display: block;
		pointer-events: none;
		cursor: default;
	}
	
	.md {
		>div {
			text-align: left;
			margin-bottom: 15px;
			>input {
				width: 100%;
				height: 50px;
				font-size: 18px;
				padding: 10px 20px;
				border: 1px solid #ccc;
				border-radius: 6px;
				box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
				line-height: 46px;
			}
		}
	}
	
	.btn {
		margin: 0;
		width: 100%;
		height: 50px;
		font-size: 14px;
		line-height: 48px
	}
</style>